import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView,Image,Picker } from '@tarojs/components'
import { AtTabs, AtTabsPane,AtList, AtListItem,AtProgress,AtGrid  } from 'taro-ui'
// import React from 'react';
// import ReactEcharts  from 'echarts-for-react';
import { DNavBar, Dmorinfo, DItemError, DModal,DAtInpute } from '@/components'
import CardealerList  from './CardealerList'
import http from '@/api'
import Chart from 'taro-echarts'
// import common from '@/common'
import './statistics.scss'
// import './components/gridBoxStatis.scss'
import './advanceStatics.scss'	
// import jsonData from './json.js'
export default class Index extends Component {

  constructor(props) {
    super(props)
    this.state = {
      active: 0,
	  modelActive:0,
	  indAreaSelect:0,//
	 
	  listObj:{
		  brand:[],
		  model:[],
		  local:[{local:'全国'}],
		  banksData:{},
		  carlist:[],
	  },
	  optionsChart:{
	    tooltip: {
	      trigger: 'item'
	    },
		color: [ '#F44557',
				'#FF9F23',
				'#72B3F5',
				'#4BC49D',
				'#FFC331',
				//
				'#3DF49D',
				'#AFC321',
				'#AFC5F6',
				'#BAC163',
				'#CDC3F1',
				//
				'#FTC4D2',
				'#7DC3D3',
				'#DBC2D4',
				//
				'#64B2D4',
				'#34C2D4',
				'#2AA2D4',
				],
	    legend: {
	      bottom: '2%',
	      left: 'center',
		  // backgroundColor:'#F44557'
	    },
		
	    series: [
	      {
	        name: '',
	        type: 'pie',
	        radius: ['45%', '70%'],
			top:50,
			center:['50%','30%'],
	        avoidLabelOverlap: false,
	        label: {
	          show: false,
	          position: 'center'
	        },
	        emphasis: {
	          label: {
	            show: false,
	          }
	        },
	        labelLine: {
	          show: false
	        },
	        data: [
	          // { value: 1048, name: '浦东发展银行' },
	          // { value: 735, name: '广发银行' },
	          // { value: 580, name: '招商银行' },
	          // { value: 484, name: '中国工商银行' },
	          // { value: 300, name: '农业银行' }
	        ]
	      }
	    ]
	  },
      statisticsData: [
      	{statistics: '本年度按揭次数', 'num': 0,img:require('../assets/mortage/nian.png')},
      	{statistics: '本季度按揭次数', 'num': 0,img:require('../assets/mortage/ji.png')},
      	{statistics: '本月按揭次数', 'num': 0,img:require('../assets/mortage/yue.png')},
      	{statistics: '本周按揭次数', 'num': 0,img:require('../assets/mortage/zhou.png')}
      ],
    }
  }
 bindCarform(pageKey){
 	  Taro.navigateTo({
 	    url: `/pages/mortgage/vehicleStatistics?pageKey=${pageKey}`
 	  })
 }
  componentWillMount() {
    // this.httpMySearchCarList()
    let { active = 0 } = this.$router.params
    this.getData()
	
	
    // this.handleClick(+active)
  }
  getData(){
	  //按揭统计
	  http.getMortgage().then((data)=>{
		  //jsonData
		   let result = data
		   let modelStatistics = result.modelStatistics
		   let {statisticsData,carlist,listObj} = this.state
	  	   statisticsData[0].num = result.numberOfMortgagesThisYear||0
		   statisticsData[1].num  = result.numberOfMortgagesThisQuarter||0
		   statisticsData[2].num  = result.numberOfMortgagesThisMonth ||0
		   statisticsData[3].num  = result.mortgagesThisWeek ||0
		   listObj.carlist = result.carDealerStatistics
		   listObj.brand = modelStatistics[0].brand
		   listObj.model = modelStatistics[0].models
		   result.modelStatistics[0].local='全国'
		   listObj.local = result.modelStatistics //地区
		   listObj.banksData = result.proportionOfBanks
		   //处理车商，车型
		   // console.log("listObjlistObjddd",listObj,carlist)
		   this.setState({
		   		 statisticsData,
				 listObj
		   },()=>this.handleClick(0))
	    })
  }
  componentDidShow() {
  }
  //寻车详细
  handleDetail(item) {
    let { active } = this.state
    if (active === 1) {
      return Taro.showToast({
        title: '该寻车已过期',
        icon: 'none'
      })
    }
    
  }
  onLocalChange(e){
     let {listObj} = this.state
	  listObj.brand = listObj.local[e.detail.value].brand
	  listObj.model =  listObj.local[e.detail.value].models
	  this.setState({
	        listObj,
			indAreaSelect:e.detail.value
	      })
  }
  //切换tab
  handleClick(active) {
	let { listObj,optionsChart } = this.state
	optionsChart.series[0].data = []
	this.setState({
	  active,
	  optionsChart,
	},()=>{
		let arr = []
		let indArr = listObj.banksData[active==1?'branch':'banks']
		indArr.length>0&&indArr.map((list,i)=>{
			arr.push({
				value:+list[`${active==1?'branch':'banks'}Number`],
			    name:list[`${active==1?'branch':'banks'}Name`] })
		})
		optionsChart.series[0].data = arr
		this.setState({
		  optionsChart,
		})
	})
	
  }
  handleModelClick(active) {
    this.setState({
      modelActive:active,
    })
  }
  
  render() {
    const tabList = [{ title: '银行' }, { title: '支行' }]
	const modelActivetabList = [{ title: '品牌' }, { title: '车型' }]
    const {
      active,
	  modelActive,
	  listObj,
	  indAreaSelect,
	  optionsChart
    } = this.state
	  console.log("sadsa",optionsChart)
    return (
      <View className=' b_statistics'>
        <DNavBar title={'按揭统计'}></DNavBar>
        <View className='b_statistics__box'>
          <View className='b_statistics__content'>
             <View className='gridBox  at-row at-row--wrap'>

			   {this.state.statisticsData.map(item=>(
			  <View className=" at-col at-col-6  hasBorder"  > 
			    <View className='t-left gridBox_num'>{item.num}</View>
				<View className="flex-box">
				   <Image className='gridBox_icon'  src={item.img} />
					<View className="pad gridBox_text">{item.statistics}</View>
				</View>
			  </View>))}
			  			    </View>
				  <View className='advanceStatics-listBox' style="width:100%">
	
				  <AtList hasBorder={true} >
				    <AtListItem className='car_title'
				        title='车商排行前十名'
				        extraText='查看更多'
						onClick={this.bindCarform.bind(this,'mort-carShoper')}
						arrow='right'
						 hasBorder={false}
				         />
						 
						 </AtList>
				   <CardealerList attrProp={{name:'carDealerName',value:'carDealerNumber'}} active={0} count={10} list={listObj.carlist} />
				   
				   <AtList hasBorder={true} >
				     <AtListItem className='car_title'
				         title='车型排行前十名'
				         extraText='查看更多'
				   						onClick={this.bindCarform.bind(this,'mort-model')}
				   						arrow='right'
				   						 hasBorder={false}
				          /></AtList>
										 
						<View className='account-box tabBoxList flex-box between pad' >
						  <AtTabs className='padLeft' tabDirection='horizontal' swipeable={true} current={modelActive} tabList={modelActivetabList} onClick={this.handleModelClick.bind(this)}>
						</AtTabs>
			
						<Picker mode='selector' rangeKey='local' range={listObj.local}  onChange={this.onLocalChange.bind(this)}>
						    <View className='flex-box padRig'>
							{listObj.local[indAreaSelect].local||'全国'}
							<View className='at-icon at-icon-chevron-down'></View>
							</View> 
						 </Picker>
						</View>
				    <CardealerList attrProp={{name:`${modelActive===1?'models':'brand'}Name`,value:`${modelActive===1?'models':'brand'}Number`}} active={0} count={10} 
					list={listObj[`${modelActive===1?'model':'brand'}`]} />
				    </View>
				   {/*统计饼图*/}
				   <View id='chartMain'>
				   <AtList className='account-box tabBoxList' hasBorder={true} >
				     <AtListItem className='car_title'
				         title='银行统计'
				         note={ <AtTabs tabDirection='horizontal' swipeable={true} current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
				     <AtTabsPane />
				   </AtTabs>}
				   	hasBorder={false}
				          />
				   			</AtList> 
				   			  {!!optionsChart.series[0].data.length&&<Chart
							  height={'20rem'}
				   			    option={optionsChart}
				   			  />}
				   </View>
				 
          </View>
        </View>
        </View>
    )
  }
}
